<template>

  <SearchTablePage :search-config="baseTableSearchModel" :table-config="baseTableModel"/>

</template>

<script lang="ts" setup>
    defineOptions({
        name: 'LoginLogPageData',   //全局别名
        title: '表格页',   //标题
    });
    // 接口
    // import LoginLogApi from '/@/api//LoginLogApi.ts';


    import FORM_FIELD_TYPE from '/@/constants/FormFieldType';
    import VDialog  from '/@/utils/dialogUtil.ts'

    const router = useRouter();
    const baseTable = ref(null as any);
    const baseTableSearch = ref(null as any);
    const editRef = ref<any>(null);

    // 表格搜索初始化searchModel
    const baseTableSearchModel = ref({
        columnCount: 4,
        expandLimit: 6,
        autoFit: true,
        columnWidth: '300px',
        labelPosition: 'right',
        labelWidth: '100px',
        search:async (reset: Boolean) => {  //搜索、重置按钮  回调方法钩子   实现父类 ---夸组件调用

            let data = await  baseTable.value.getList(baseTableSearch.value.formData, reset)
            // console.info(data); //todo 拿不到数据
                $baseMessage(data.message, 'success', 'vab-hey-message-success');

        },
    items: [ //搜索项初始化

    {
                label: "",
                field: "id",
                clearable: true,
                type: FORM_FIELD_TYPE.INPUT,

               placeholder:"请输入",

            },

    {
                label: "用户id",
                field: "userId",
                clearable: true,
                type: FORM_FIELD_TYPE.INPUT,

               placeholder:"请输入",

            },

    {
                label: "第三方登录用户id",
                field: "thirdUserId",
                clearable: true,
                type: FORM_FIELD_TYPE.INPUT,

               placeholder:"请输入",

            },

    {
                label: "",
                field: "loginType",
                clearable: true,
                type: FORM_FIELD_TYPE.INPUT,

               placeholder:"请输入",

            },

    {
                label: "",
                field: "create_time",
                clearable: true,
                type: FORM_FIELD_TYPE.DATE_RANGE,
               placeholder:"请输入",

            config: {
                props: {   //日期精度配置
                     type: "daterange",
                    startPlaceholder: "开始日期",
                    endPlaceholder: "结束日期",
                    format: "YYYY-MM-DD",
                      }
               },
            },

    {
                label: "",
                field: "inviteCode",
                clearable: true,
                type: FORM_FIELD_TYPE.INPUT,

               placeholder:"请输入",

            }
    ],

    buttons: [    //功能区域
      {
            name: "下载",
            buttonClass: 'primary',
            width: 100,
            click: () => {   //暴露的方法钩子
            //  LoginLogApi.pageDataXls( baseTableSearch.value.formData,baseTable.value.getXlsTitle())
            }
        },

          {
                name: "新增",
                buttonClass: 'primary',
                width: 100,
                click: (row: any, index: Number,handlers:object) => {        // 点击回调事件方法钩子，  点击触发

                    VDialog.open({
                        title: '新增',

                        content:{ //内容初始形式
                            type: 'component', //text:"",预留文本
                            name:'/loginLog/edit',
                            query: {  },

                        },

                        callBack: (data:any) => {
                            handlers.refresh()
                        },
                        onClose: () => {
                            console.log("对话框已关闭");
                        },
                    });

                },
            },
        {
            name: "批量删除",
            buttonClass: 'danger',
            width: 100,
            isShow: (row: any) => {
                return false;
            },
            click: () => {   //暴露的方法钩子
                console.log(baseTable.value.getSelection());
            },
        },
    ]
    })
    // 表格初始化Model
    const baseTableModel = ref({
        border: true,
        pagination: true,
        inline: true,
        selectable: true,
        isFullscreen: false,
        minWidth: '200px',
        data: {    //table  初始化
            current: 1,
            size: 10,
            total: 100,
            data: []
        },
        // requestData:{api:LoginLogApi.getPageData,query:{}},   //数据源 参数有效性： 'steady|transient'
        columns: [
               {
                label: "",
                field: "id",
                width:100,
                  },
               {
                label: "用户id",
                field: "userId",
                width:150,
                  },
               {
                label: "第三方登录用户id",
                field: "thirdUserId",
                width:150,
                  },
               {
                label: "",
                field: "loginType",
                width:180,
                  },
               {
                label: "",
                field: "create_time",
                width:200,
                  },
                                   {
                label: "",
                field: "update_time",
                width:200,
                  },
               {
                label: "",
                field: "inviteCode",
                width:180,
                  },
        ],


        actions: [
            {
                name: "详情",

                buttonClass: 'primary',
                buttonType: 'text',
                click: ({row,handlers}) => {
                    VDialog.open({
                        title: '详情',
                        content:{ //内容初始形式
                            type: 'component', //text:"",预留文本
                            name:'/loginLog/detail',
                            query: { loginLogId: row.id },

                        },
                        callBack: (data:any) => {

                        },
                        onClose: () => {
                            console.log("对话框已关闭");
                        },
                    });
                },
                isShow: (row: object) => {
                    return true;
                },
                fixed: 'right'
            },
            {
                name: "编辑",
                buttonClass: 'primary',   //按钮颜色控制
                buttonType: 'text',      // 按钮风格   text  link  button
                isShow: (row: object) => {  //根据业务做动态隐藏张氏
                    return true
                },
                click: ({row,handlers}) => {        // 点击回调事件方法钩子，  点击触发

                    VDialog.open({
                        title: '编辑',
                        content:{ //内容初始形式
                            type: 'component', //text:"",预留文本
                            name:'/loginLog/edit',
                            query: { loginLogId: row.id },

                        },

                        callBack: (data:any) => {
                            baseTable.value.getList(baseTableSearch.value.formData, false);//编辑成功后刷新
                        },
                        onClose: () => {
                            console.log("对话框已关闭");
                        },
                    });

                },
                fixed: 'right'
            },

            {
                name: "删除",
                buttonClass: 'danger',
                buttonType: 'text',
                fixed: 'right',
                click: (row: any, index: Number) => {

                        $baseConfirm('您确定要删除当前项吗', null, async () => {

                        // const { message } =  await LoginLogApi.del({  loginLogIds: row.id })
                            $baseMessage(message, 'success', 'vab-hey-message-success');

                        baseTable.value.getList(baseTableSearch.value.formData, false)

                    })

                }
            },

        ]

    })



    onActivated(() => {
    })



</script>


